<template>
    <div class="" id="PeriodProjectQA">
        <div>
            <h1 class="text-success">项目阶段质量达标</h1>
        </div>
        <hr>
        <div class="row">
            <div class="col-lg-12">
                <div class="ibox">
                    <div class="ibox-content">
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="m-b-md">
                                    <h2 class="text-success"></h2>
                                </div>

                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-6">
                                <dl class="row mb-0">
                                    <div class="col-sm-4 text-sm-right"><dt>当前阶段:</dt> </div>
                                    <div class="col-sm-8 text-sm-left"><dd class="mb-1"><span class="label label-primary">{{ projectinfo.current_phase }}</span></dd></div>
                                </dl>
                                <dl class="row mb-0">
                                    <div class="col-sm-4 text-sm-right"><dt>开始时间:</dt> </div>
                                    <div class="col-sm-8 text-sm-left"> <dd class="mb-1">{{ projectinfo.starttime }}</dd></div>
                                </dl>
                                <dl class="row mb-0">
                                    <div class="col-sm-4 text-sm-right"> <dt>结束时间:</dt></div>
                                    <div class="col-sm-8 text-sm-left"> <dd class="mb-1"></dd>{{ projectinfo.endtime }}</div>
                                </dl>
                            </div>
                            <div class="col-lg-6" id="cluster_info">
                                <dl class="row mb-0">
                                    <div class="col-sm-4 text-sm-right">
                                        <dt>阶段名称:</dt>
                                    </div>
                                    <div class="col-sm-8 text-sm-left">
                                        <dd class="mb-1">{{ projectinfo.phasename }}</dd>
                                    </div>
                                </dl>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-12">
                                <dl class="row mb-0">
                                    <div class="col-sm-2 text-sm-right">
                                        <dt>Completed:</dt>
                                    </div>
                                    <div class="col-sm-10 text-sm-left">
                                        <dd>
                                            <div class="progress m-b-1">
                                                <div :style="'width:'+ complete +'%;'" class="progress-bar progress-bar-striped progress-bar-animated"></div>
                                            </div>
                                            <small>Project completed in <strong>{{ projectinfo.completerate }}</strong></small>
                                        </dd>
                                    </div>
                                </dl>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <Chart :id="chart_info.barchart2.id" :title="chart_info.barchart2.title" :labels="chart_info.barchart2.labels" 
            :type="chart_info.barchart2.type" :datasets="chart_info.barchart2.datasets" :date="chart_info.barchart2.date"></Chart>
        </div>

        <div class="row">
            <!-- <Chart :id="chart_info.barchart1.id" :title="chart_info.barchart1.title" :labels="chart_info.labels" 
                :type="chart_info.barchart1.type" :datasets="chart_info.barchart1.datasets" :date="chart_info.date"></Chart> -->
            <Chart :id="chart_info.linechart1.id" :title="chart_info.linechart1.title" :labels="chart_info.labels" 
                :type="chart_info.linechart1.type" :datasets="chart_info.linechart1.datasets" :date="chart_info.date"></Chart>
            <Chart :id="chart_info.linechart2.id" :title="chart_info.linechart2.title" :labels="chart_info.labels" 
                :type="chart_info.linechart2.type" :datasets="chart_info.linechart2.datasets" :date="chart_info.date"></Chart>
            <Chart :id="chart_info.linechart3.id" :title="chart_info.linechart3.title" :labels="chart_info.labels" 
                :type="chart_info.linechart3.type" :datasets="chart_info.linechart3.datasets" :date="chart_info.date"></Chart>
        </div>

        <div class="row">
            <div class="col-lg-12">
                <DataTable :table_id="tableinfo_pq.id" :table_title="tableinfo_pq.title" :columns="tableinfo_pq.columns" 
                    :table_data='tableinfo_pq.table_data' :columns_key="tableinfo_pq.columns_key" :columnDefs="tableinfo_pq.columnDefs">  
                </DataTable> 
            </div>
        </div>


    </div>
</template>
<script>
import ComingSoon from '@/components/qa/ComingSoon.vue'
import Chart from '@/components/qa/Chart.vue';
import DataTable from '@/components/qa/DataTable.vue';
export default {
    name: 'PeriodProjectQA',
    components: {
        ComingSoon,
        Chart,
        DataTable,
    },
    data() {
        return {
            date: '',
            project_id: '',
            projectinfo: [],
            complete: 0,
            tableinfo_pq: {
                id: 'table',
                title: '项目阶段质量汇总',
                columns: ['阶段','阶段测试通过率','阶段测试稳定指标','阶段测试性能指标'],
                table_data: [],
                columns_key: [
                    {data: 'pq_phase'},
                    {data: 'p_testpassrate'},
                    {data: 'p_teststableindex'},
                    {data: 'p_testperformanceindex'},
                ],
                columnDefs: [],
            },
            chart_info: {
                date: '',
                labels: [],
                barchart1: {
                    id: ['div_1','canvas_1'],
                    type: 'bar',
                    title: '阶段质量考核项',
                    datasets: [
                        {
                            label: "阶段测试通过率",
                            backgroundColor: 'rgba(26,179,148,0.5)',
                            pointBorderColor: "#fff",
                            data: []
                        },
                        {
                            label: "阶段测试稳定指标",
                            backgroundColor: 'rgba(150,205,205,0.5)',
                            borderColor: "rgba(26,179,148,0.7)",
                            pointBackgroundColor: "rgba(26,179,148,1)",
                            pointBorderColor: "#fff",
                            data: []
                        },
                        {
                            label: "阶段测试性能指标",
                            backgroundColor: 'rgba(47,79,79,0.5)',
                            borderColor: "rgba(26,179,148,0.7)",
                            pointBackgroundColor: "rgba(26,179,148,1)",
                            pointBorderColor: "#fff",
                            data: []
                        }
                    ],
                },
                linechart1: {
                    id: ['div_2','canvas_2'],
                    type: 'line',
                    title: '阶段测试通过率',
                    datasets: [
                        {
                            label: "阶段测试通过率(%)",
                            backgroundColor: 'rgba(26,179,148,0)',
                            borderColor: "rgba(26,179,148,0.7)",
                            pointBackgroundColor: "rgba(26,179,148,1)",
                            pointBorderColor: "#fff",
                            data: []
                        },
                    ],
                },
                linechart2: {
                    id: ['div_3','canvas_3'],
                    type: 'line',
                    title: '阶段测试稳定指标',
                    datasets: [
                        {
                            label: "阶段测试稳定指标",
                            backgroundColor: 'rgba(26,179,148,0)',
                            borderColor: "rgba(26,179,148,0.7)",
                            pointBackgroundColor: "rgba(26,179,148,1)",
                            pointBorderColor: "#fff",
                            data: []
                        },
                    ],
                },
                linechart3: {
                    id: ['div_4', 'canvas_4'],
                    type: 'line',
                    title: '阶段测试性能指标',
                    datasets: [
                        {
                            label: "阶段测试性能指标",
                            backgroundColor: 'rgba(26,179,148,0)',
                            borderColor: "rgba(26,179,148,0.7)",
                            pointBackgroundColor: "rgba(26,179,148,1)",
                            pointBorderColor: "#fff",
                            data: []
                        },
                    ],
                },
                barchart2: {
                    id: ['div_5','canvas_5'],
                    type: 'bar',
                    date: '',
                    title: '当前阶段缺陷SAB指标达成情况',
                    labels: ['S', 'A', 'B', 'C', 'D'],
                    datasets: [
                        {
                            label: "缺陷数量(个)",
                            backgroundColor: 'rgba(26,179,148,0.5)',
                            pointBorderColor: "#fff",
                            data: []
                        },
                        {
                            label: "缺陷SAB指标(个)",
                            backgroundColor: 'rgba(0,128,0,0.8)',
                            pointBorderColor: "#fff",
                            data: [10, 30, 40, 50, 60]
                        },                        
                    ],
                },
            },
            tableinfo_sab: {
                table_data: [],
            },
        }
    },
    watch: {
        "tableinfo_sab.table_data": {
            handler: function() {
                this.barchartDataHandler(this.tableinfo_sab.table_data);
                this.chart_info.barchart2.date = 'test1';
            },
            deep: true
        }
    },
    mounted: function() {
        this.getBugSABDaily('2018-08-01','2018-08-24', this.project_id)
        // this.chartInfoHandler(this.tableinfo.table_data);
        this.getCurPhase(this.project_id);
        this.getPeriodQuality(this.project_id);
    },
    methods: {
        chartInfoHandler: function(chartData) {
            var phase = [];
            var data_i = [];
            for (var i = 0; i < chartData.length; i++) {
                phase.push(chartData[i]['pq_phase']);
                data_i.push(parseFloat(chartData[i]['p_testpassrate'].replace("%","")));
                // data_d.push(parseFloat(chartData[i]['d'].replace("%","")));
                // data_lc.push(parseFloat(chartData[i]['e'].replace("%","")));
            }
            this.chart_info.labels = phase;
            this.chart_info.linechart1.datasets[0].data = data_i;
            console.log(this.chart_info.linechart1.datasets[0].data)
            // this.chart_info.linechart2.datasets[0].data = data_d;
            // this.chart_info.linechart3.datasets[0].data = data_lc;
        },
        getBugSABDaily: function(after, before, project, version, component) {
            this.$axios.get('/api/qa/bugsabdaily/?after='+after+'&before='+before+'&project='+project+'&version='+version+'&component='+component)
                .then((response) => {
                    if (response.status == 200) {
                        // eslint-disable-next-line
                        // console.log(response.data.sum);
                        this.tableinfo_sab.table_data = response.data.bugSAB_daily;
                    }
                })
                .catch(function(err) {
                    // eslint-disable-next-line
                    console.log(err);
                });
        },
        barchartDataHandler: function(data) {
            var bardata = [];
            bardata.push(data[0]['count_S']);
            bardata.push(data[0]['count_A']);
            bardata.push(data[0]['count_B']);
            bardata.push(data[0]['count_C']);
            bardata.push(data[0]['count_D']);
            // this.chartinfo.piechart1.datasets[0].data = piedata;
            this.chart_info.barchart2.datasets[0].data = bardata;
        },
        getCurPhase: function(project) {
            this.$axios.get('/api/qa/getcurphase/?project='+project)
                .then((response) => {
                    if (response.status == 200) {
                        // eslint-disable-next-line
                        // console.log(response.data.sum);
                        this.projectinfo = response.data;
                        this.getComplete();
                    }
                })
                .catch(function(err) {
                    // eslint-disable-next-line
                    console.log(err);
                });
        },
        getComplete: function() {
            var complete = this.projectinfo.completerate;
            this.complete = parseInt(complete.replace("%",""));
        },
        getPeriodQuality: function(project) {
            this.$axios.get('/api/qa/getperquality/?project='+project)
                .then((response) => {
                    if (response.status == 200) {
                        // eslint-disable-next-line
                        // console.log(response.data.sum);
                        this.tableinfo_pq.table_data = response.data.period_quality;
                        this.chartInfoHandler(this.tableinfo_pq.table_data)
                        console.log()
                        this.chart_info.date = 'test';
                    }
                })
                .catch(function(err) {
                    // eslint-disable-next-line
                    console.log(err);
                });
        },

    },
    created: function() {
        this.project_id = this.$route.params.pmsProjectId;
    }
}
</script>